<template>
  <div class="OrderStarting">
    <Header title="订单计时"></Header>
    <scroller :on-refresh="refresh" ref="myscroller">
      <div style="padding:31px 6px 0 6px">
        <div style="background: #fff;padding: 0px 12px;margin-top: 12px;border-radius: 5px">
          <div style="display: flex;padding: 10px 4px;border-bottom:1px #F8FAF9 solid ;">
            <div style="flex: 1;text-align: left;font-size: 15px">店铺名称</div>
            <div class="_aav">{{startinfo.shopname}}</div>
          </div>
          <div style="display: flex;padding: 10px 4px">
            <div style="flex: 1;text-align: left;font-size: 15px">到店时间</div>
            <div class="_aav" style="color: #979797">{{startinfo.time.substring(0,16)}}</div>
          </div>
        </div>
        <div style="padding: 15px 15px 3px 15px;font-size: 16px">座位信息</div>
        <div style="height: 80px;display: flex;align-items:center;background: #fff;border-radius: 5px;margin-top:12px;"
             v-for="item in setlist">
          <div style="flex: 1;text-align: left;position: relative;padding-left: 45px"><img
            src="static/icon/home_icon_yellow@3x.png" alt=""
            style="width: 20px;position: absolute;left:12px;top:0;">{{item.name}}
          </div>
          <div style="flex: 1;padding-right: 12px;position: relative">

            <div class="pausestart" v-if="item.pauseTime!=null" @click="onstart(item)">
              继续计时
            </div>
            <div v-if="item.pauseTime!=null" class="Continuetime">60:00后将开始计时</div>
            <div class="pausestart" v-if="item.pauseTime==null&&item.resumeTime==null" @click="pause(item)">
              暂停计时
            </div>
          </div>
        </div>
        <div class="SettleAccounts" @click="SettleAccounts">结账</div>
      </div>
      <confirm v-model="show" @on-confirm="payingbill">
        <img src="static/icon/order_icon_money@3x.png" style="width: 60px" alt="">
        <p style="text-align:center;">确定结账吗?</p>
      </confirm>
    </scroller>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {Confirm} from 'vux'
  import Header from './../Header'
  import {PauseTime, ContinueTime, Bill, OrderStart, QueryOrder} from '../../api/mine'

  export default {
    name: 'OrderStarting',
    data () {
      return {
        list: [{
          name: '连排一座',
          ispause: false
        }, {
          name: '连排二座',
          ispause: true
        }],
        show: false,
        show2: false,
        startinfo: {},
        setlist: []
      }
    },
    created () {
      this.startinfo = this.$route.query
      this.setlist = JSON.parse(this.$route.query.setlist)

    },
    methods: {
      SettleAccounts () {
        this.show = true
      },
      //继续计时
      onstart (item) {
        ContinueTime({
          orderId: this.startinfo.orderid,
          orderSeatId: item.id,
        }).then(res => {
          console.log(res.data.status)
          if (res.data.status === 'success') {
            this.startinfo = res.data.data
          }
        })
      },
      refresh () {
        let _this = this
        QueryOrder({
          orderId: _this.startinfo.orderid
        }).then(res => {
          this.$refs.myscroller.finishPullToRefresh()
          if (res.data.status === 'success') {
            let startinfo = res.data.data
            startinfo.shopname = startinfo.shopName
            startinfo.time = startinfo.startTime
            startinfo.orderid = startinfo.id
            startinfo.setlist = startinfo.orderSeats
            this.startinfo = startinfo
          } else {
            Vue.$vux.toast.text(res.data.msg, 'bottom')
          }

        })
      },
      //暂停计时
      pause (item) {
        Vue.$vux.confirm.show({
          content: `    <img src="static/icon/pop_icon_!@3x.png" style="width: 60px" alt="">
      <p style="text-align:center;">${item.name}暂停</p>
      <p style="text-align:center;">请向工作人员确认?</p>`,
          showCancelButton: false,
          onConfirm () {

          }
        })
        return
        PauseTime({
          orderId: this.startinfo.orderid,
          orderSeatId: item.id,
        }).then(res => {
          if (res.data.status === 'success') {
            this.show2 = true
          }
        })
      },
      //结账
      payingbill () {
        // this.$router.replace({
        //   name: 'PayingBill',
        //   query: {
        //     ...this.startinfo,
        //     paymoney: 111
        //   }
        // })
        // return
        Bill({
          orderId: this.startinfo.orderid
        }).then(res => {
          if (res.data.status === 'success') {
            this.$router.replace({
              name: 'PayingBill',
              query: {
                ...this.startinfo,
                paymoney: res.data.data.billAmount
              }
            })
          } else {
            Vue.$vux.toast.text(res.data.msg, 'bottom')
          }
        })

      }
    },
    components: {
      Header,
      Confirm
    },
  }
</script>

<style lang="less" type="text/less">
  .OrderStarting {
    color: @font-color;
    font-size: 14px;
    ._aav {
      flex: 2;
      text-align: right;
      color: @common-color;
    }
    .pausestart {
      width: 100px;
      height: 25px;
      border-radius: 25px;
      background: @common-color;
      text-align: center;
      line-height: 25px;
      color: #fff;
      float: right;
    }
    .Continuetime {
      position: absolute;
      top: 28px;
      right: 12px;
      font-size: 12px;
      color: #979797;
    }
    .SettleAccounts {
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-radius: 42px;
      background: @common-color;
      color: #fff;
      font-size: 16px;
      width: calc(100% - 30px);
      margin: 30px auto;
      /*position: fixed;*/
      /*bottom: 0px;*/
      /*left: 15px;*/
    }
  }
</style>
